<template>
  <div>
    <ymm-content title="权限管理">
      <template slot="toolbar">
        <ymm-toolbar @add="onAdd" @handleInput="onInput"/>
      </template>
      <template>
        <menu-table :menus="menus" @update="onUpdate" @delete="onDelete"/>
        <ymm-pagination @sizeChange="onSize" @numChange="onNum" :total="total"/>
      </template>
    </ymm-content>
    <menu-dialog :is-add="isAdd" :is-show="show" @closeDialog="show=false" :menu="menu"
                 @handleClose="menu={ menuType: 1}" @handleSubmit="handleSubmit"/>
  </div>
</template>

<script>
import YmmContent from "@/components/common/ymm-content";
import YmmToolbar from "@/components/common/ymm-toolbar";
import YmmPagination from "@/components/common/ymm-pagination";
import MenuTable from "@/views/system/menu/menu-table";
import menuDialog from "@/views/system/menu/menu-dialog";
import {addMenu, deleteMenu, pageMenus, updateMenu} from "@/api/system-menu";

export default {
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      label: '',
      menus: [],
      total: 0,
      show: false,
      isAdd: false,
      menu: {
        menuType: 2
      }
    }
  },
  components: {YmmContent, YmmToolbar, YmmPagination, MenuTable, menuDialog},
  methods: {
    /*index事件*/
    getMenus() {
      pageMenus(this.pageNum, this.pageSize, this.label).then(res => {
        this.menus = res.rows
        this.total = res.total
      }).catch(err => {
      })
    },
    /*dialog事件*/
    handleSubmit(menu) {
      if (this.isAdd) {
        addMenu(menu).then(res => {
          this.$message.success('添加成功')
          this.getMenus()
          this.show = false
        }).catch(err => {
          this.$message.error('添加失败')
        })
      } else {
        updateMenu(menu).then(res => {
          this.$message.success('修改成功')
          this.getMenus()
          this.show = false
        }).catch(err => {
          this.$message.error('修改失败')
        })
      }
    },
    /*ToolBar事件*/
    onAdd() {
      this.isAdd = true
      this.show = true
    },
    onInput(content) {
      this.label = content
      this.pageNum = 1
      this.getMenus()
    },
    /*table事件*/
    onUpdate(menu) {
      this.show = true
      this.menu = menu
      this.isAdd = false
    },
    onDelete(id) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenu(id).then(res => {
          this.$message.success('删除成功')
          this.getMenus()
        }).catch(err => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    },
    /*分页事件*/
    onSize(size) {
      this.pageSize = size
      this.getMenus()
    },
    onNum(val) {
      this.pageNum = val
      this.getMenus()
    }
  },
  created() {
    this.getMenus()
  }
}
</script>

<style scoped>

</style>
